<!-- 基桩工程检测管理--按建设项目统计 -->
<template>
  <div class="department">
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 部门信息 -->
      <div class="department_right_name">
        <div>基桩检测统计</div>
      </div>

      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left">
          <div class="selectBox">
            <span class="nameBox">项目名称：</span>
            <el-select @change="function (v) {
              return selectCompany(v);
            }
            " v-model="companyName" placeholder="请选择项目">
              <el-option v-for="v in companyList" :key="v.F_ProjectName" :label="v.F_ProjectName" :value="v">
              </el-option>
            </el-select>
          </div>
          <div class="selectBox">
            <span class="nameBox">检测状态：</span>
            <el-select @change="function (v) {
              return selectJudgetype(v);
            }
            " v-model="getList.keyWord" placeholder="选择检测状态">
              <el-option v-for="v in Checktype" :key="v.fItemName" :label="v.fItemName" :value="v">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="print">
          <div class="printTable">
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDataList(getList)">
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <el-table ref="multipleTableA" v-loading="loading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" :data="tableData"
          style="width: 100%" height="100%" stripe border highlight-current-row @current-change="rowChange">
          <el-table-column fixed type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="F_Status" label="检测状态" align="center" width="80">
            <!-- 超出鼠标滑过显示 -->
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_Status">{{
                  scope.row.F_Status
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_ProjectName" label="项目名称">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_ProjectName">{{
                  scope.row.F_ProjectName
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_PierCount" label="墩台个数" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_PierCount">{{
                  scope.row.F_PierCount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_FoundationCount" align="center" label="基桩数量" width="80">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_FoundationCount">{{
                  scope.row.F_FoundationCount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="checkedCount" align="center" label="已检基桩" width="80">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.checkedCount">{{
                  scope.row.checkedCount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="rate" label="完成率%" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.rate">{{
                  scope.row.rate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="FirstClasscount" label="I类" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.FirstClasscount">{{
                  scope.row.FirstClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="firstRate" label="I类占比" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.firstRate">{{
                  scope.row.firstRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="SecondClasscount" label="II类" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.SecondClasscount">{{
                  scope.row.SecondClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="secondRate" label="II类占比" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.secondRate">{{
                  scope.row.secondRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ThirdClasscount" label="III类" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.ThirdClasscount">{{
                  scope.row.ThirdClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="thirdRate" label="III类占比" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.thirdRate">{{
                  scope.row.thirdRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="FourthClasscount" label="IV类" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.FourthClasscount">{{
                  scope.row.FourthClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fourthRate" label="IV类占比" width="80" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fourthRate">{{
                  scope.row.fourthRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CheckStartDates" label="检测开始时间" width="120" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.CheckStartDates">{{
                  scope.row.CheckStartDates
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CheckEndingDates" label="检测结束时间" width="120" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.CheckEndingDates">{{
                  scope.row.CheckEndingDates
                }}</a>
              </div>
            </template>
          </el-table-column>
          <template slot="empty">
            <img style="width: 285px; height: 208px" src="@/assets/img/undata.png" alt="" />
            <div class="pageFlagText">暂时没有数据哦！</div>
          </template>
        </el-table>
        <div class="block" v-if="navigatepageNums > 1">
          <div class="paginationInfo">
            检索到{{ queryCriteriaData.total }} 条记录 | 显示第
            <span v-if="getList.page == 1">{{ getList.page }}</span><span v-else>{{ 20 * (getList.page - 1) }}</span> -
            <!-- {{ 20 * getList.page }} 条记录 -->
            <span v-if="queryCriteriaData.pages == queryCriteriaData.lastPage"> {{
              queryCriteriaData.total }}</span>
            <span v-else> {{ 20 * getList.page }} </span>
            条记录
          </div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="getList.page" :page-size="getList.pageSize" layout="prev, pager, next, jumper"
            :total="queryCriteriaData.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getInfoByProject, // 基桩检测统计按建设项目/施工单位/工程名称统计
  // 基桩检测统计获取项目名称
  getProjectIdAndName,
  // 基桩检测统计获取施工单位名称
  getCompanyIdAndName,
} from "@/api/request.js";
export default {
  name: "Home",
  data() {
    return {
      names: "building",
      lr_look: null,
      projectList: [],
      Checktype: [
         {
          fItemName: "==请选择==",
          fItemValue: "==请选择==",
        },
        {
          fItemName: "未开始",
          fItemValue: "未开始",
        },
        {
          fItemName: "检测中",
          fItemValue: "检测中",
        },
        {
          fItemName: "已结束",
          fItemValue: "已结束",
        },
      ], //检测状态：- 根据当前登录用户获取检测类型
      companyList: [], //检测状态：
      companyName: null,
      projectName: null,
      // 列表
      getList: {
        fDepartmentid: "", // 项目id
        fCompanyid: "", // 施工单位id
        keyWord: "", // 检测状态
        modelType: "0", // 0-按建设项目   1-按施工单位   2-按工程项目
        page: 1,
        pageSize: 20,
        fUserid: "",
        companyid: "",
      },
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      formData: {},
      fId: null, //当前数据fId
      loading: false,
      // 类表数据
      tableData: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("yjSmart-userInfo"));
    this.getList.fUserid = this.userInfo.userId;
    this.getList.companyid = this.userInfo.companyId;
    this.getDataList(this.getList);
    // 项目名称数据
    this.getProjectIdAndName();
    this.btnRole(this.names);
  },
  methods: {
    // 按钮权限
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("yjSmart-ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        this.lr_look = btnStr.includes("lr_look");
      } else {
        this.lr_look = true;
      }
    },
    // 页面切换
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getList.page = val;
      this.getDataList(this.getList);
    },
    // 检测状态
    selectJudgetype(e) {

     if (e.fItemName == "==请选择==") {
        this.getList.keyWord = '';
      } else {
        this.getList.keyWord = e.fItemName;
      }
      this.getDataList(this.getList);
    },
    // 选择项目名称
    selectCompany(e) {
      this.companyName = e.F_ProjectName;
      this.getList.fDepartmentid = e.F_ProjectId;
      this.projectName = "";
      this.getList.fCompanyid = "";
      // 调用施工单位数据
      this.getCompanyIdAndName(e.F_ProjectId);

      this.getDataList(this.getList);
    },
    // 选择施工单位
    selectProject(e) {
      console.log(e);
      this.projectName = e.F_CompanyName;
      this.getList.fCompanyid = e.F_CompanyId;
      this.getDataList(this.getList);
    },
    // 项目名称数据
    getProjectIdAndName() {
      getProjectIdAndName({})
        .then((res) => {
          if (res.errcode == 0) {
            var arr = [
              {
                F_ProjectId: "",
                F_ProjectName: "请选择",
              },
            ];
            this.companyList = arr.concat(res.data.projectList);
          } else {
            this.$message.error("项目名称", res.msg);
            return false;
          }
        })
        .catch(() => {
          console.log("项目名称获取失败");
          return false;
        });
    },
    // 施工单位数据来源
    getCompanyIdAndName(id) {
      getCompanyIdAndName({ projectId: id })
        .then((res) => {
          if (res.errcode == 0) {
            this.projectList = res.data.companyList;
          } else {
            this.$message.error("施工单位", res.msg);
            return false;
          }
        })
        .catch(() => {
          console.log("施工单位获取失败");
          return false;
        });
    },

    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },

    // 获取列表数据
    getDataList(data) {
      this.loading = true;
      var that = this;
      getInfoByProject(data)
        .then((res) => {
          if (res.errcode == 0) {
            that.loading = false;
            that.tableData = res.data.pageInfo.list;

            this.queryCriteriaData = res.data.pageInfo;
            this.navigatepageNums =
              this.queryCriteriaData.navigatepageNums.length;
          } else {
            this.loading = false;
            this.$message.error("列表数据", res.msg);
          }
        })
        .catch((err) => {
          console.log("列表接口", err);
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.mechanism_nav_left {
  display: flex;
  align-items: center;
  width: 60%;
}

.mechanism_nav_left .selectBox {
  display: flex;
  align-items: center;
  /* width: 3.5rem; */
}

.mechanism_nav_left .selectBox .nameBox {
  width: 85px;
  font-size: 0.12rem;
}

.leftBox {
  width: 51%;
  box-sizing: border-box;
}

.rightBox {
  width: 49%;
  box-sizing: border-box;
}

.modelBox {
  display: flex;

  height: 40px;
  align-items: center;

  /* line-height: 40px;
    height: 25px; */
}

.modelBoxChild {
  width: 100%;
  border: 1px solid #d1d7e2;
  color: #676d77;
  background-color: #f5f7fa;
  height: 25px;
  border-radius: 4px;
  padding: 0 15px;
  line-height: 25px;
  /* box-sizing: border-box; */
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #000;
}
</style>